<template>

</template>

<script>
export default {
  mounted(){
    this.showBar();
  },
  methods:{
    showBar() {
      //基于准备好的dom，初始化echarts实例
      const barCharts = this.$echarts.init(this.$refs.showBar);
      //声明颜色数组
      let colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
        '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
      this.$http.get('http://localhost:80/returns/returns/getReturnsInfo').then(res => {
        // console.log(res.data);
        let array = res.data.data;
        let rnames = [];
        let nums = [];
        for (let i = 0; i < array.length; i++) {
          // console.log(array[i]);
          rnames.push(array[i].rname);
          nums.push(array[i].rnumber);
        }

        // 指定图表的配置项和数据,初始化图表
        var optionBar = {
          title: {
            text: '退货商品统计'
          },
          tooltip: {},
          legend: {
            data: ['退货商品数量']
          },
          xAxis: {
            type: 'category',
            data: rnames,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '退货商品数量',
              data: nums,
              type: 'bar',
              itemStyle: {
                color: function (params) {
                  //通过颜色数组获取颜色
                  return colors[params.dataIndex]
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        barCharts.setOption(optionBar);
      })
    },
  }
}
</script>
